<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body onload="draw()">
    <canvas id="mycanvas" height="150" width="150"></canvas>
    <script>
        // 需求：以四个正方形为背景，将背景的透明度设置为0.2，产生径向渐变的效果
        function draw() {
            const canvasId = $("#mycanvas")[0];
            const ctx = canvasId.getContext && canvasId.getContext("2d");
            ctx.fillStyle = "#FD0";
            ctx.fillRect(0, 0, 75, 75);
            ctx.fillStyle = "#6C0";
            ctx.fillRect(75, 0, 75, 75);
            ctx.fillStyle = "#09F";
            ctx.fillRect(0, 75, 75, 75);
            ctx.fillStyle = "#F30";
            ctx.fillRect(75, 75, 75, 75);
            // 重置填充的颜色，否则会一直以最后的fillStyle的颜色为主，现在重置为白色，用于圆圈
            // 设置全局透明度值
            ctx.fillStyle = "white";
            ctx.globalAlpha = 0.2;
            for(let i = 0; i < 8; i++) {
                ctx.beginPath();
                ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
                ctx.fill();
            }
        }
    </script>
</body>
</html>